<template>
	<div id="ClientReturn">
		<x-header :left-options="{showBack: false}" title="申请退货" class="header">
			<a slot="left" @click="back()"><i class="tp-icon icon-black-back"></i></a>
		</x-header>
		<div class="goods-wrap">
			<div class="title vux-1px-b">
				<img src="../assets/images/home/icon_return_title.png" alt="" />
				<h2>{{goodsOrder.shop_name}}</h2>
			</div>
			<div class="content">
				<img v-if="auctionOrder.goods_id == undefined" src="../assets/images/home/defaultImg.jpg" alt="" />
				<img v-else :src="'/los/uploads/thumb/goods/' + auctionOrder.goods_id + '_76X76.jpeg'" alt="" />
				<div class="desc">
					<h2>{{goodsOrder.goods_name}}</h2>
					<p class="money">成交金额 <span>￥{{goodsOrder.pay_money}}</span></p>
					<p class="timer">成交时间：{{common.timestampToTime(auctionOrder.order_time)}}</p>
				</div>
			</div>
		</div>
		<div class="reason-wrap">
			<div class="check" @click="reason = true">
				<span>申请退货原因</span>
				<i class="re-icon icon-right"></i>
				<b v-model="cause">{{cause}}</b>
			</div>
			<actionsheet v-model="reason" :menus="reasonType" :close-on-clicking-mask="false" show-cancel @on-click-menu="Checkcause" class="reason"></actionsheet>
			<div v-show="cause == '其他'">
				<x-textarea v-model="return_cause" :max="300" placeholder="请您详细描述退货原因，还可上传最多三张照片" @on-focus="onEvent('focus')" @on-blur="onEvent('blur')" class="text"></x-textarea>
				<div id="photos">
					<div class="last">
						<div class="add">
							<i class="tp-icon icon-photo"></i><span>选填</span>
						</div>
						<input id="file" name="images[]" type="file" class="fileprew" accept="image/*" multiple="multiple" />
					</div>
				</div>
			</div>
		</div>
		<div class="check">
			<span>退款金额</span>
			<input type="text" placeholder="请输入退款金额" v-model="return_money" />
			<!--<i class="money">￥{{goodsOrder.pay_money}}</i>-->
			<i class="re-icon icon-right"></i>
			<b>可退款0.01-{{goodsOrder.pay_money}}元</b>
		</div>
		<!--<div class="return-record" v-if="return_record != ''">
			<h2 class="vux-1px-b">退款记录</h2>
			<tr class="title">
				<th>事件名称</th>
				<th>理由说明</th>
				<th>时间</th>
			</tr>
			<tr class="desc" v-for="item in return_record">
				<td>买家-申请退货</td>
				<td>{{item.return_cause}}</td>
				<td>{{item.add_time.substring(5)}}</td>
			</tr>
		</div>-->
		<button @click="applyReturn">申请退货</button>
		<loading :show="show" text="上传中"></loading>
		<toast v-model="success" type="text" width='4.5rem' is-show-mask>{{msg}}</toast>
		<actionsheet v-model="otherReason" :menus="otherType" @on-click-menu-delete="agreeReturn" :close-on-clicking-mask="false" show-cancel class="other-reason"></actionsheet>
	</div>
</template>

<script>
	import $ from 'jquery'
	import { XHeader, Actionsheet, XTextarea, Loading, Toast } from 'vux'
	import 'lrz/dist/lrz.all.bundle'
	export default {
		data() {
			return {
				goodsOrder: {},
				auctionOrder: {},
				order_sn: '',
				return_cause: '',
				msg: '',
				return_money: '',
				success: false,
				reason: false,
				show: false,
				otherReason: false,
				return_record: [],
				cause: '请选择退货原因',
				reasonType: {
					menu1: '未收到货',
					menu2: '收到商品破损',
					menu3: '收到商品与描述不符',
					menu4: '商品质量问题',
					menu5: '其他'
				},
				otherType: {
					'title.noop': '您确定以"其他"理由，申请退货？',
					delete: '<span style="color:#a30000">确定</span>'
				},
			}
		},
		components: {
			XHeader,
			Actionsheet,
			XTextarea,
			Loading,
			Toast
		},
		mounted() {
			this.getOrderInfo();
			this.uploadImgs();
		},
		methods: {
			getOrderInfo: function() {
				this.order_sn = this.$route.params.order_sn;
				this.$http({
					method: 'GET',
					url: '/los/api/member/goods_order_info.json?order_sn=' + this.order_sn,
					data: ''
				}).then((result) => {
					this.goodsOrder = result.data.goods_order;
					if(result.data.auction_order) {
						this.auctionOrder = result.data.auction_order;
					} else if(result.data.seckill_order) {
						this.auctionOrder = result.data.seckill_order;
					}
					this.return_money = this.goodsOrder.pay_money;
					this.getGoodsReturn();
				}).catch((err) => {

				})
			},
			//上传问题图片
			uploadImgs: function() {
				var _this = this;
				$('#file').change(function() {
					let _that = this;
					let view = $('#photos');
					//限制图片上传张数
					let imgcount = 8;
					for(let i = 0; i < _that.files.length; i++) {
						_this.show = true;
						lrz(_that.files[i]).then(function(rst) {
							let status = true;
							if(view.find('img').length > imgcount) {
								status = false;
								_this.upload = !_this.upload;
								_this.msg = '最多上传9张图片';
								$('.last').hide();
							}
							if(status) {
								let str = '<li class="item">' +
									'<img src ="' + rst.base64 + '"/>' +
									'<a href="javascript:;" class="del">删除</a>' +
									'<input type="hidden" id="images" name="images[]"  accept="image/*" multiple="multiple" value="' + rst.base64 + '"/>'; +
								'</li>';
								view.append(str);
								if(i == _that.files.length - 1) {
									// 处理成功会执行
									_this.show = false;
								}
								//点击删除
								$(".del").on("click", function() {
									$(this).parent().remove();
									$(".last").show();
								});
							}
						}).catch(function(err) {
							// 处理失败会执行
						})
					}
				})
			},

			//选择原因
			Checkcause: function(key, item) {
				this.cause = item;
			},
			//申请退货
			applyReturn: function() {
				if(this.cause == '其他') {
					this.otherReason = !this.otherReason;
				} else {
					this.goodsReturn();
				}
			},
			//确认退货
			agreeReturn: function() {
				this.goodsReturn();
			},
			//提交售后信息
			goodsReturn: function() {
				var returnImg = new Array;
				$('#photos .item input').each(function(index, item) {
					returnImg[index] = $(this).val();
				});
				let check_cause;
				if(this.cause == '其他') {
					check_cause = this.return_cause
				} else {
					check_cause = this.cause
				}
				var params = {
					order_sn: this.order_sn,
					return_money: this.return_money,
					return_cause: check_cause,
					order_from: this.goodsOrder.order_from,
					return_imgs: returnImg
				}
				console.log(params);
				if(this.cause == '请选择退货原因' || this.cause == undefined) {
					this.success = !this.success;
					this.msg = '请填写申请退货原因'
				} else if(this.return_money > this.goodsOrder.pay_money) {
					this.success = !this.success;
					this.msg = '退款金额不得大于成交金额'
				} else {
					this.$http({
						method: 'POST',
						url: '/los/api/buyer/goods_return.json',
						data: params
					}).then((result) => {
						if(result.data.code == 1) {
							this.success = !this.success;
							this.msg = result.data.msg;
							setTimeout(() => {
								location.href = '#/OrderInfo/order_sn/' + this.order_sn + '?return_sn=' + result.data.data.goods_return.return_sn;
							}, 500)
						} else {
							this.success = !this.success;
							this.msg = result.data.msg;
						}
					}).catch((err) => {

					})
				}
			},
			//获取退货记录
			getGoodsReturn: function() {
				this.$http({
					method: 'GET',
					url: '/los/api/buyer/goods_return.json?order_sn=' + this.order_sn + '&order_from=' + this.goodsOrder.order_from
				}).then((result) => {
					if(result.data.code == 1) {
						this.return_record = result.data.data;
					} else {
						this.return_record = ''
					}
				}).catch((err) => {

				})
			},

			onEvent: function(event) {
				console.log('on', event)
			},
			back: function() {
				window.history.go(-1);
			}
		}
	}
</script>

<style scoped>
	.header {
		background: #fff;
	}
	
	.goods-wrap {
		margin-top: 0.34rem;
		width: 100%;
		padding: 0 0.26rem;
		background: #fff;
	}
	
	.goods-wrap .title {
		overflow: hidden;
		height: 1.14rem;
		line-height: 1.14rem;
	}
	
	.goods-wrap .title img {
		float: left;
		width: 0.37rem;
		height: 0.37rem;
		margin-top: 0.38rem;
		margin-right: 0.21rem;
	}
	
	.goods-wrap .title h2 {
		float: left;
	}
	
	.goods-wrap .content {
		overflow: hidden;
		padding: 0.26rem 0;
	}
	
	.goods-wrap .content img {
		float: left;
		width: 1.73rem;
		height: 1.73rem;
		border-radius: 0.05rem;
	}
	
	.goods-wrap .content .desc {
		float: left;
		margin-left: 0.21rem;
		width: 75%;
		overflow: hidden;
	}
	
	.goods-wrap .content .desc h2 {
		font-size: 0.37rem;
		color: #222;
		font-weight: normal;
		white-space: nowrap;
		text-overflow: ellipsis;
		overflow: hidden;
	}
	
	.goods-wrap .content .desc .money {
		margin-top: 0.32rem;
		font-size: 0.32rem;
		color: #666;
		line-height: 0.48rem;
	}
	
	.goods-wrap .content .desc .money span {
		color: #222;
	}
	
	.goods-wrap .content .desc .timer {
		font-size: 0.32rem;
		color: #666;
		line-height: 0.48rem;
	}
	
	.reason-wrap {
		background: #fff;
	}
	
	.check {
		overflow: hidden;
		margin-top: 0.26rem;
		height: 1.3rem;
		line-height: 1.3rem;
		background: #fff;
		padding: 0 0.26rem;
	}
	
	.check span {
		float: left;
		font-size: 0.4rem;
		color: #222;
	}
	
	.check b {
		float: right;
		font-weight: normal;
		font-size: 0.37rem;
		color: #666;
	}
	
	.check input {
		height: 100%;
		line-height: 100%;
		margin-left: 0.34rem;
		color: #DD2828;
		width: 3rem;
		font-size: 0.37rem;
	}
	
	.check .re-icon {
		float: right;
		margin-left: 0.18rem;
		margin-top: 0.42rem;
	}
	
	.check .money {
		color: #DD2828;
		font-size: 0.37rem;
		margin-left: 0.34rem;
		font-style: normal;
	}
	
	#photos {
		position: relative;
		padding: 0.34rem 0.26rem;
	}
	
	#photos .add {
		margin-left: 0.53rem;
		overflow: hidden;
	}
	
	#photos .add i {
		float: left;
		margin-right: 0.16rem;
	}
	
	#photos .add span {
		font-size: 0.37rem;
		color: #aaa;
	}
	
	#photos input {
		position: absolute;
		top: 0;
		opacity: 0;
	}
	
	.return-record {
		margin: 0.26rem;
		background: #fff;
		border-radius: 0.26rem;
	}
	
	.return-record h2 {
		height: 1.17rem;
		line-height: 1.17rem;
		text-align: center;
	}
	
	.return-record .title {
		height: 1.06rem;
		line-height: 1.06rem;
		overflow: hidden;
		display: flex;
	}
	
	.return-record .title th {
		flex: 1;
		float: left;
		font-size: 0.34rem;
		color: #222;
	}
	
	.return-record .desc {
		display: flex;
		height: 0.88rem;
		line-height: 0.88rem;
	}
	
	.return-record .desc td {
		flex: 1;
		text-align: center;
		font-size: 0.34rem;
		color: #666;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	
	button {
		width: 9.2rem;
		background: #a30000;
		font-size: 0.45rem;
		color: #fff;
		border: none;
		height: 1.17rem;
		line-height: 1.17rem;
		border-radius: 0.1rem;
		margin: 2rem 0.4rem 1rem;
	}
</style>
<style>
	#ClientReturn #photos {
		overflow: hidden;
	}
	
	#ClientReturn #photos .item {
		width: 2.96rem;
		height: 2.96rem;
		float: left;
		margin-right: 0.28rem;
		position: relative;
		margin: 0.1rem 0.26rem 0 0;
	}
	
	#ClientReturn #photos .item:last-child {
		margin-right: 0;
	}
	
	#ClientReturn #photos .item img {
		width: 100%;
		height: 100%;
	}
	
	#ClientReturn #photos .item .del {
		position: absolute;
		right: 0;
		top: 0;
		width: 0.58rem;
		height: 0.58rem;
		font-size: 0;
		background: url(../assets/images/home/icon_del.png) center center no-repeat;
		background-size: 100%;
	}
</style>